<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_Web Workers_应用</title>
</head>
<body>
<input type="text" placeholder="数值" id="num">
<input type="button" value="计算" id="btn">
<!--
 Web Workers是HTNL5提供的一个JavaScript多线程解决方案
 我们可以将一些大计算量的代码交由Web Workers运行，不冻结用户界面
 但是子线程完全受主线程控制，且不能操作dom
 所以，这个新标准并没有改变JavaScript单线程的本质

1. H5规范提供了js分线程的实现, 取名为: Web Workers
2. 相关API
  * Worker: 构造函数, 加载分线程执行的js文件
  * Worker.prototype.onmessage: 用于接收另一个线程的回调函数
  * Worker.prototype.postMessage: 向另一个线程发送消息
3. 不足
  * worker内代码不能操作DOM(更新UI)
  * 不能跨域加载JS
  * 不是每个浏览器都支持这个新特性
-->
<script>
    //计算得到fibonacci数列中第n个数的值
    //在主线程计算: 当位数较大时, 会阻塞主线程, 导致界面卡死
    //在分线程计算: 不会阻塞主线程
    var input=document.getElementById('num')
    var btn=document.getElementById('btn')
    btn.addEventListener('click',function () {
        var number=input.value
        // 主线程
        // 创建一个worker对象
        var worker=new Worker('worker.js')
        // 向分线程发送消息
        worker.postMessage(number)
        console.log('主线程向分线发送数据'+number)
        // 绑定接受消息的监听
        worker.onmessage=function (event) {
            console.log('主线程接受分线程返回的数据'+event.data)
            alert(event.data)
        }
    })
</script>
</body>
</html>

worker.js
// 分线程
var onmessage=function (event) {
    var number=event.data
    console.log('分线程接受到主线程发生过来的数据'+number)
    // 计算
    var res=fibonacci(number)
    console.log('分线程向主线程返回数据'+res);
    postMessage(res)
}
console.log(this);//DedicatedWorkerGlobalScope {name: "", onmessage: ƒ, onmessageerror: null, postMessage: ƒ, close: ƒ, …}
// 分线程中的全局对象不再是window，所以在分线程中不能更新界面
function fibonacci(n) {
    return n<=2?1:fibonacci(n-1)+fibonacci(n-2)//递归调用
}